<template>
  <div class="particulars-wrap">
    <div class="particulars-box">
      <span>姓名：</span><span>{{lend.userName}}</span>
    </div>
    <div class="particulars-box">
      <span>身份证号：</span><span>{{lend.certNo}}</span>
    </div>
    <div class="particulars-box">
      <span>联系电话：</span><span>{{lend.userTel}}</span>
    </div>
    <div class="particulars-box">
      <span>企业名称：</span><span>{{lend.mechanismName}}</span>
    </div>
    <div class="particulars-box">
      <span>入职日期：</span><span>{{workBeginTime}}</span>
    </div>
    <div class="particulars-box">
      <span>工号：</span><span>{{lend.workNum}}</span>
    </div>
    <div class="particulars-box distance" @click="openLendRecord">
      <span class="record-text">查看历史借支记录</span><img src="../in.png" class="record-pic" onclick="return false"/>
    </div>

    <div class="particulars-box">
      <span>借支金额：</span><span class="money">{{lendMoney}}元</span>
    </div>
    <div class="particulars-box">
      <span>审核日期：</span>
      <span class="check" v-if="lend.status == 0">审核中</span>
      <span :class="{'money':lend.status==1,'refuse':lend.status==2}" v-else-if="lend.status != 0">{{lend.status==1?'已通过':'已拒绝'}}&nbsp;&nbsp;{{passTime}}</span>
    </div>

    <div class="photo-box">
      <div class="photo-con">
        <span class="title">上传图片：</span>
        <div class="photo">
          <img :src="lend.userWorkImage" class="pic" onclick="return false" @click="showPic(lend.userWorkImage)"
               v-if="lend.userWorkImage"/>
          <img :src="require('./img_nor.png')" class="pic" onclick="return false" v-else/>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {baseUrl} from "../../../config/env"
  import {toDecimal, formatDate} from "../../../config/util"
  import {ImagePreview} from 'vant'

  export default {
    data() {
      return {
        id: "",
        lend: "",
        lendMoney: "",
        workBeginTime: "",
        passTime: ""
      }
    },
    mounted() {
      let base64 = require('js-base64').Base64;
      this.userSign = base64.decode(sessionStorage.getItem("success"));
      this.id = this.$route.query.id;
      this.queryParticulars();
    },
    methods: {
      showPic(pic) {//预览
        ImagePreview([pic]);
      },
      queryParticulars() {
        this.$vux.loading.show({
          text: '加载中',
        });
        let time = (new Date()).getTime();
        let url = baseUrl + "/resident/query_lendmoney_detail?timestamp=" + time;
        let param = {"sgin": this.userSign, "timestamp": time};
        let signature = this.$signature(url, param);

        this.axios.get(baseUrl + "/resident/query_lendmoney_detail?sgin=" + this.userSign + "&id=" + this.id + "&auth=" + signature + "&timestamp=" + time).then((res) => {
          let resultObj = res.data;
          this.$vux.loading.hide();
          if (resultObj.code == 0 && resultObj.data != null) {
            this.lend = resultObj.data;
            this.lendMoney = toDecimal(resultObj.data.lendMoney);
            let date = formatDate(new Date(this.lend.workBeginTime), 'yyyy-MM-dd');
            this.workBeginTime = date.substr(0, 4) + "年" + date.substr(5, 2) + "月" + date.substr(8, 2) + "日";
            if (this.lend.set_time != null && this.lend.set_time != "") {//审核通过时间
              let pass = formatDate(new Date(this.lend.set_time), 'yyyy-MM-dd');
              this.passTime = pass.substr(0, 4) + "年" + pass.substr(5, 2) + "月" + pass.substr(8, 2) + "日";
            }
          } else {
            this.$vux.toast.text(resultObj.msg, "middle");
          }
        }).catch(() => {
          this.$vux.loading.hide();
          this.$vux.toast.text("网络异常", "middle");
        });
      },
      openLendRecord() {//借支记录页
        this.$router.push({path: '/lendrecordlist', query: {"lendId": this.id}});
      }
    },
    components: {
      ImagePreview
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../assets/stylus/mixin.styl"

  .particulars-wrap
    wh(100%, 100%)
    background: rgba(242, 242, 242, 1)
    overflow: hidden
    .particulars-box
      fj(space-between, center)
      wh(100%, 1.28rem)
      background: rgba(255, 255, 255, 1)
      border-bottom: 0.027rem solid rgba(242, 242, 242, 1)
      span
        size-color(0.427rem, rgba(51, 51, 51, 1))
        &:nth-child(1)
          margin-left: 0.333rem
        &:last-child
          margin-right: 0.333rem
      .money
        color: $color
      .check
        color: rgba(255, 187, 76, 1)
      .refuse
        color: #ff5353
      .record-text
        color: rgba(60, 175, 255, 1)
      .record-pic
        margin-right: 0.333rem
        wh(0.32rem, 0.32rem)
    .distance
      margin-bottom: 0.267rem
    .photo-box
      display: flex
      wh(100%, 100%)
      background: rgba(255, 255, 255, 1)
      .photo-con
        display: flex
        margin-top: 0.44rem
        margin-right: 0.333rem
        margin-left: 0.333rem
        wh(100%, 2.133rem)
        .title
          size-color(0.427rem, rgba(51, 51, 51, 1))
        .photo
          margin-left: auto
          wh(3.2rem, 2.133rem)
          .pic
            wh(100%, 100%)
            box-sizing: border-box
            border-radius: 0.08rem
</style>
